<template>
    <div class="scheduling">
        <a-modal width="90%" :visible="visible" title="预警生产计划" @cancel="modalCancel" class="yuan-modal scheduling-modal"
            :dialog-style="{ top: '20px' }" :confirm-loading="loading">
            <a-spin tip="Loading..." :spinning="loading">
                <div class="yuan-container">

                    <div class="page-top" v-if="editInfo&&editInfo.id">
                        <span class="page-title">{{editInfo.prodName}}</span>
                        <span style="margin-left:20px">计划日期：{{editInfo.createTime |format('yyyy-MM-dd')}}</span>
                        <span style="margin-left:20px">标准：{{editInfo.standard}}</span>
                    </div>

                    <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData"
                        :label-col="{ style: { width: '150px' } }" :wrapper-col="{ style: { width: 'calc(100% - 160px)' } }">
                        <div class="form-panel">
                            <div class="form-panel-box">
                                <div style="display:flex;width:100%;margin-top:20px" v-for="(item,i) in alarmData" :key="i">
                                    <div style="margin-right:20px;font-size:16px">
                                        产品大类：{{item.inventoryType}}
                                    </div>
                                    <div style="margin-right:20px;font-size:16px">
                                        装量：{{item.loadingQuantity}}
                                    </div>
                                    <div style="flex-grow:1;background-color: #f8f8f8;padding:10px 0">
                                        <div style="margin-bottom:10px">
                                            <span style="margin-left:20px">可供销售天数：{{item.availableSellDay}}天</span>
                                            <span style="margin-left:20px">
                                                差量：
                                                <span
                                                    class="c-danger font-bignum">{{item.differenceNum | toDecimalNoZero(0)}}</span>
                                                袋
                                            </span>
                                            <span style="margin-left:20px">计划包装量：
                                                <span class="c-warning font-bignum"> {{item.planNum}}</span>
                                                袋</span>
                                            <span style="margin-left:20px">计划配方颗粒（颗粒）投入量：
                                                <span class="c-warning font-bignum"> {{item.inputNum}}</span>
                                                kg</span>
                                            <div></div>
                                            <span style="margin-left:20px">预计成品库存：
                                                <span class="c-success font-bignum"> {{item.stockNum}}</span>
                                                袋</span>
                                            <span style="margin-left:20px">erp库存：
                                                <span class="c-success font-bignum"> {{item.stockNumErp}}</span>
                                                袋</span>
                                            <span style="margin-left:20px">中转库库存：
                                                <span class="c-success font-bignum"> {{item.stockNumSys}}</span>
                                                袋</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a-form-model>

                    <a-card>
                        <a-tabs type="card">
                            <template>
                                <a-tab-pane key="1" tab="包装计划"></a-tab-pane>
                            </template>

                        </a-tabs>

                        <!-- 包装计划 -->
                        <div>
                            <PlanListBZVue ref="planListBZ" :planSimulation="editInfo" :alarmData="pageDetail"
                                v-if="pageDetail.length>0" />
                        </div>

                    </a-card>
                </div>
            </a-spin>
            <template slot="footer">
                <template>
                    <a-button type="primary" @click="clickSave">
                        确认排产
                    </a-button>
                    <!-- <a-button type="primary" @click="savePlan('2')">
                        关闭计划
                    </a-button> -->
                </template>

                <a-button @click="modalCancel">
                    取消
                </a-button>
            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import warningApi from "@/api/warningApi";
import { InputNumber } from "ant-design-vue";
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import PlanListBZVue from "./planListBZV3.vue";

@Component({ name: "TPL", components: { PlanListBZVue } })
export default class index extends Vue {
    @Prop({ default: "" }) visible!: boolean;
    @Prop({ default: () => {} }) editInfo!: any;
    @Watch("visible")
    visibleChange() {
        if (this.visible) {
            this.pageDetail = [];
            this.pageInit();
        }
    }
    loading = false;
    formData = {};

    closeModal() {
        setTimeout(() => {
            (this.$refs.form as any).resetFields();
        }, 200);
        this.$emit("closeModal");
    }
    modalCancel() {
        this.closeModal();
    }

    async pageInit() {
        // 获取顶部产品大类信息
        await this.getAlarmData();

        // 获取填写信息
        await this.getPageDetail();
    }

    alarmData = [];
    async getAlarmData() {
        this.loading = true;

        try {
            const res = await warningApi.getPlanInfoV2(this.editInfo.id);
            this.alarmData = res.data;
        } finally {
            this.loading = false;
        }
    }

    pageDetail = [];
    async getPageDetail() {
        this.loading = true;

        try {
            const res = await warningApi.getPlanDetailV2(this.editInfo.id);
            this.pageDetail = res.data;
        } finally {
            this.loading = false;
        }
    }
    sureClose() {
        this.closeModal();
        this.$emit("resetList");
    }
    async clickSave() {
        const processPlanDetailListBZ = (this.$refs["planListBZ"] as any)?.getPageInfo();
        console.info(processPlanDetailListBZ);
        if (processPlanDetailListBZ === false) {
            return false;
        }
        this.loading = true;

        try {
            const res = await warningApi.editPlanV2(processPlanDetailListBZ);
            this.$message.success("编辑成功");
            this.closeModal();
            this.$emit("resetList");
        } finally {
            this.loading = false;
        }
    }
}
</script>

<style lang="scss">
.scheduling-modal {
    .page-top {
        padding-bottom: 20px;
        border-bottom: solid 1px #eee;
    }
    .page-title {
        font-weight: bold;
        font-size: 20px;
    }
}
</style>
